<template>
   <!-- border-top-right-radius: 120px; -->
    <layout layout="aside" :width="isCollapse?'45px':'201px'" id="addMenu" style="overflow-y: hidden;border-top-right-radius: 20px;border-top-left-radius: 20px;"
    :style="{'overflow-x':isCollapse?'hidden':'auto'}">
        <el-menu theme="dark" :collapse="isCollapse" :router="true" :default-active="$route.path"
                 style="padding-top:40px;"
                 class=" navbar el-menu-vertical-demo demo" @open="handleopen" @close="handleclose"
                 @select="handleselect" unique-opened :collapse-transition="false">
            <el-scrollbar class="left-scrollbar scrollLeft" >
                <div class="scrollChildren" style="border-top:1px solid #52B7F5;overflow: hidden;">
                    <template v-for="(item,index) in menuList" v-loading="loading">
                        
                        <!-- <el-submenu index="0" v-if="item.winName==='/views/home/home'" class="firstPageMenu">
                        {{item.winName}}
                            <template slot="title">
                                <li> -->
                                   <!-- <span :class="item.smallIcon"  @click.stop="toIndex" style=""></span>-->
                                   <!-- <span :class="item.smallIcon"></span>
                                    <span ref="navSpan">{{item.name}}</span>
                                </li>
                            </template>
                        </el-submenu> -->

                        <el-submenu :index="index+''" v-if="!item.leaf" :key="index">


                            <template slot="title">
                                <li>
                                    <span :class="item.smallIcon" class="" style=""></span>
                                    <span ref="navSpan">{{item.name}}</span>
                                </li>
                            </template>
                            <div v-for="(child,index) in item.children" :key="child.path">
                                <el-menu-item v-if="child.children.length==0" :index="child.path">
                                    <li style="    font-size:13px;">
                                        <!--<span :class="child.smallIcon" class="" style=""></span>-->{{child.name}}
                                        <span class="navNum" v-if='child.winName==="selfTip.examination"'
                                              v-show="numShow">{{num}}</span>
                                        <span class="navNum" v-if='child.winName==="selfTip.yyRecord"' v-show="numShow">{{num2}}</span>
                                    </li>
                                </el-menu-item>
                                <div v-else class="nav_3">
                                    <el-submenu :index="'q'+index+''">

                                        <template slot="title">
                                            <li style="padding-left:50px;" class="test">
                                                <span :class="child.smallIcon"></span>
                                                {{child.name}}
                                            </li>
                                        </template>
                                        <div v-for="(child,index) in child.children" :key="child.path">
                                            <el-menu-item :index="child.path" :router="child.path">
                                                <li><span :class="child.smallIcon"></span>{{child.name}}</li>
                                            </el-menu-item>
                                        </div>
                                    </el-submenu>
                                </div>

                            </div>

                        </el-submenu>
                        <el-menu-item v-if="item.leaf&&!isCollapse" :id="index" :index="item.path">
                            <li style='padding-left:45px;'>
                                <span :class="item.smallIcon"></span>
                                <span ref="navSpan" class="navSpan">{{item.name}}</span>
                            </li>
                        </el-menu-item>

                    </template>

                    <!-- <el-menu-item index="/home/home">
                        <li>
                            <span class="iconfont iconmenu-shouye"></span>
                            <span>首页</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/cinemaDeviceWatch">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>影厅设备监控</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/troubleWatch">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>故障监控</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/schedulesWatch">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>排期监控</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/tmsStatusWatch">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>TMS状态监控</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/showStatusWatch">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>影院放映监控</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/watch/cinemaShowLog">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>影院放映日志</span>
                        </li>
                    </el-menu-item>
                    <el-menu-item index="/cinema/cinemaMap">
                        <li>
                            <span class="iconfont iconmenu-wodeshixiangiconfont iconmenu-wodeshixiang"></span>
                            <span>影院地图</span>
                        </li>
                    </el-menu-item>
                    <el-submenu index="/cinema" popper-class="poprmenu" v-if="true">
                        <template slot="title">
                            <li>
                                <span class="iconfont iconmenu-xitongguanliiconfont iconmenu-xitongguanli"></span>
                                <span>基础信息</span>
                            </li>
                        </template>
                        <el-menu-item index="/cinema/cinemaList">
                            <li>影院信息</li>
                        </el-menu-item>
                        <el-menu-item index="/cinema/cinemaHallList">
                            <li>影厅信息</li>
                        </el-menu-item>
                        <el-menu-item index="/cinema/cinemaDeviceList">
                            <li>设备信息</li>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="/" popper-class="poprmenu" v-if="true">
                        <template slot="title">
                            <li>
                                <span class="iconfont iconmenu-xitongguanliiconfont iconmenu-xitongguanli"></span>
                                <span>系统设置</span>
                            </li>
                        </template>
                        <el-menu-item index="/system/userManagement" route="/system/userManagement">
                            <li>用户管理</li>
                        </el-menu-item>
                        <el-menu-item index="/system/roleManagement">
                            <li>角色管理</li>
                        </el-menu-item>
                        <el-menu-item index="/system/dataDictionary">
                            <li>数据字典</li>
                        </el-menu-item>
                    </el-submenu> -->
                </div>
            </el-scrollbar>
           
        </el-menu>
       
    </layout>
</template>
<script>
    import menuUtils from '@/utils/menuUtils';
    import Service from './navMenu.service'
    import cookieConfig from '@/utils/getCookie';
    import {State, Getter, Mutation} from 'vuex-class';

    var routers = [];
    export default {
        menuStatus: Boolean,

        data() {
            return {
                isCollapse: false,
                numShow: false,
                num2: 0,
                datas: this.$router.options.routes,
                sysName: '数字化档案',
                collapsed: false,
                applyOne: true,
                applyTwo: false,
                applyThree: true,
                applyThree2: false,
                applyFour: false,
                applyFive: true,
                applySix: false,
                shen: true,
                bian: false,
                sysUserName: '',
                sysUserId: '',
                num: 0,
                count: 0,
                menuList: [],
                todo:0,
                menuWidth:201,
                loading:true
            }
        },
        methods: {
            // 获取登陆人信息
            mmm() {
                alert(3)
                this['$router'].push({
                    path: "/fileArrange/archivesManagent",
                })
            },
            getFileServer() {
                const me = this;
                if (me.count > 4) {
                    me.count = 0;
                    this['$message']({
                        message: '没有可用的文件服务器！请与管理员联系！',
                        type: 'warning'
                    });
                    return;
                }

                let serviceId = cookieConfig.getCookie('serviceId');
                let isPauseUpload = cookieConfig.getCookie('isPauseUpload');
                if (serviceId && isPauseUpload) {
                    Service.getFileServiceStatus({}).then((res) => {
                        if (!res || !res.data.data) {
                            Service.getFileService({}).then((res1) => {
                                cookieConfig.setCookie('serviceId', res1.data.data ? res1.data.data : 'file');
                                window.localStorage.setItem("serviceId", res1.data.data ? res1.data.data : 'file');
                                if (res1.data.data === serviceId) {
                                    me.count++;
                                    setTimeout(
                                        function () {
                                            me.getFileServer()
                                        }, 3000);
                                    return;
                                }
                            });
                        } else {
                            window.localStorage.setItem("serviceId", serviceId);
                        }
                    });
                } else {
                    Service.getFileService({}).then((res) => {
                        cookieConfig.setCookie('serviceId', res.data.data ? res.data.data : 'file');
                        window.localStorage.setItem("serviceId", res.data.data ? res.data.data : 'file');
                    });
                }
            },
            // 获取导航数据
            getMenus() {
                const me = this;
                if (me.menuStatus) {
                    return;
                }
                if (me.menuList.length == 0 && routers !== null && routers.length > 0) {
                    me.menuList = routers;
                    return;
                }

                me.menuStatus = true;
                Service.getMenuSearch({}).then((res) => {
                    console.log(res)
                    if(res.data.succeeded) {
                        if(res.data.data.length == 0) {
                            this.$router.push({
                                    path:'/views/home/homeword',
                                    name:'当前账号无功能与数据权限'
                                }); 
                            return
                        }
                        if(res.data.data[0].children!=null&&res.data.data[0].children.length>0) {
                            this['$router'].push({
                                path: '/'+res.data.data[0].children[0].winName,
                            })
                        } else {
                            console.log(res.data.data[0].winName)
                            this['$router'].push({
                                path: '/'+res.data.data[0].winName,
                            })
                        }
                    
                    }
                    me.handleTree(res.data.data);
                    me.$router.addRoutes(routers);
                    me.menuList = routers;
                    console.log('---------------menu---------------')
                    // 新增
                    console.log(me.menuList)
                    for (let item of routers) {
                        this.$router.options.routes.push(item)
                    }
                    me.menuStatus = false;
                    // 获取OA代办总条数
                    this.num = this.$store.state.todo;
                    if (this.num) {
                        this.numShow = true;
                    }
                    this.loading = false;
                    let authorities = JSON.parse(sessionStorage.getItem('authorities'))
                     console.log(authorities)
                     if(authorities.length>0) {
                      return me.menuList = me.menuList;

                    }else {
                         for(let item of authorities) {
                          if(item.authority == 'ROLE_USER') {
                              for(let items in me.menuList) {
                                  if(me.menuList[items].winName == 'system') {
                                      me.menuList.splice(items,1)
                                     return me.menuList = me.menuList;
 
                                  }
                              }
                          } 
                      }
                    }
                     

//                    console.log(this.$store.state.todo)
//                    console.log(this.num)
                    // Service.getMenusByLoginUser({}).then(res=>{
                    //     if(res.data.succeeded){
                    //         	if(res.data.data){
                    //                 this.num = res.data.data.workFlowCount;
                    //                 this.num2 = res.data.data.unReadCount;
                    //                 this.numShow = true;
                    // 			}else{
                    // 				 this.num = 0;
                    //                  this.num2 = 0;
                    // 				 this.numShow = false;
                    // 			}
                    //     }else{
                    //         this['$message']({
                    //             message: '查询待办数量错误！',
                    //             type: 'error'
                    //         });
                    // 	}
                    // })
                })
                // console.log(this.$router.options.routes);
            },
            // 存储用户信息 匹配权限路由
            handleTree(data) {
                window.sessionStorage.setItem('menuData', JSON.stringify(data));
                menuUtils(routers, data);
                console.log(routers)
            },
            goIndex() {
                this['$router'].push({
                    path: "/home/home",
                })
            },
            
            //折叠导航栏
            collapse: function () {
                this.isCollapse = !this.isCollapse;
                this.$emit('listisc', this.isCollapse);
                if (this.isCollapse) {
                    this.applyOne = false;
                    this.applyTwo = true;
                    this.applyThree = false;
                    this.applyFour = true;
                    this.applyFive = false;
                    this.applySix = true;
                } else {
                    this.applyOne = true;
                    this.applyTwo = false;
                    this.applyThree = true;
                    this.applyFour = false;
                    this.applyFive = true;
                    this.applySix = false;
                }
            },
            handleopen() {

            },
            handleclose() {

            },

            handleselect: function (index, indexPath) {
//                console.log(indexPath)
//                this['$router'].push({
//                    path:indexPath[indexPath.length-1]
//                })
            },
            toIndex() {
                this['$router'].push({
                    path: "/home/home",
                    name: "首页"
                })
            },
            toMenuUrl(menu) {
                this['$router'].push({
                    path: menu.path,
                    name: menu.name
                })
            },
           
            getSystemSetting() {
                if (window.localStorage.getItem('systemSetting') == null || true) {
                    // Service.getSystemSetting({}).then((res) => {
                    //     if (res.data.succeeded) {
                    //         window.localStorage.setItem('systemSetting', JSON.stringify(res.data.data));
                    //     }
                    // });
                }
            },
        },
        mounted() {
            // Service.getMenusByLoginUser({}).then((res)=>{
            //     console.log(res)
            // })
        },

        created() {
            // this.getUsers();
            if (window.sessionStorage.getItem('loadMenu') == 'true') {
                this.menuList = [];
                routers = [];
                window.sessionStorage.setItem('loadMenu', 'false');
            }
            this.getMenus();
            // this.getFileServer();
            this.getSystemSetting();
            
        },
    }
</script>

<style lang="scss">
    @import '../../styles/navbar.scss';
</style>